﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo.aspx.cs" Inherits="WD.Web.Admin.js.zyupload.demo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="zyupload-1.0.0.min.css" rel="stylesheet" />
    <script src="/Content/Scripts/jquery-1.11.2.min.js"></script>

    <script src="../bootstrap/bootstrap.min.js"></script>
    <script src="zyupload-1.0.0.min.js"></script>
    <script src="/Content/Scripts/jquery-migrate-1.2.1.min.js"></script>
    <link href="/Content/Scripts/toastr/toastr.min.css" rel="stylesheet" />
    <script src="/Content/Scripts/toastr/toastr.min.js"></script>
    <script src="/Content/Scripts/toastr/toastroption.js"></script>
    <script>
        $(function () {
            toastr.warning("请输入描述标题");
            toastr.success("请输入描述标题"); toastr.error("请输入描述标题"); toastr.info("请输入描述标题");
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="zyupload" class="zyupload"></div>

        <script type="text/javascript">
            $(function () {
                
                // 初始化插件
                $("#zyupload").zyUpload({
                    width: "650px",                 // 宽度
                    height: "400px",                 // 宽度
                    itemWidth: "140px",                 // 文件项的宽度
                    itemHeight: "115px",                 // 文件项的高度
                    url: "handle/upload.ashx",  // 上传文件的路径
                    fileType: ["jpg", "png", "js", "exe"],// 上传文件的类型
                    fileSize: 51200000,                // 上传文件的大小，单位kb
                    multiple: false,                    // 是否可以多个文件上传
                    dragDrop: true,                   // 是否可以拖动上传文件
                    tailor: true,                   // 是否可以裁剪图片
                    del: false,                    // 是否可以删除文件
                    finishDel: false,  				  // 是否在上传文件完成后删除预览
                    /* 外部获得的回调接口 */
                    onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                        console.info("当前选择了以下文件：");
                        console.info(selectFiles);
                    },
                    onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                        console.info("当前删除了此文件：");
                        console.info(file.name);
                    },
                    onSuccess: function (file, response) {          // 文件上传成功的回调方法
                        console.info("此文件上传成功：");
                        console.info(file.name);
                        console.info("此文件上传到服务器地址：");
                        console.info(response);
                        $("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
                    },
                    onFailure: function (file, response) {          // 文件上传失败的回调方法
                        console.info("此文件上传失败：");
                        console.info(file.name);
                        $("#uploadInf").append("123");
                    },
                    onComplete: function (response) {           	  // 上传完成的回调方法
                        console.info("文件上传完成");
                        console.info(response);
                    }
                });
            });
        </script>

    </form>
</body>
</html>
